<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>canvas封装绘制矩形方法</title>
</head>

<body>
<div id="canvas-warp">
    <canvas id="canvas" style=" border: 1px solid #aaaaaa; display: block; margin:  50px auto;">
    你的浏览器居然不支持Canvas? 
    </canvas>
</div>

<script>
window.onload = function() {
    var canvas = document.getElementById("canvas");
    canvas.width = 800;
    canvas.height = 600;
    var context = canvas.getContext("2d");

    context.beginPath();
    context.rect(0, 0, 800, 600);
    context.fillStyle = "#AA9033";

    context.fill();

    context.beginPath();
    for(var i=0; i<20; i++) {
        drawWhiteRect(context, 200 + 10 * i, 100 + 10 * i, 400 - 20 * i, 400 - 20 * i);
        drawBlackRect(context, 205 + 10 * i, 105 + 10 * i, 390 - 20 * i, 390 - 20 * i);

    }
}

function drawBlackRect(cxt, x, y, width, height) {
    cxt.beginPath();
    cxt.rect(x, y, width, height);
    cxt.closePath();

    cxt.lineWidth = 5;
    cxt.strokeStyle = "black";

    cxt.stroke();
}

function drawWhiteRect(cxt, x, y, width, height) {
    cxt.beginPath();
    cxt.rect(x, y, width, height);
    cxt.closePath();

    cxt.lineWith = 5;
    cxt.strokeStyle = "white";

    cxt.stroke();
}
</script>
</body>

</html>